<template>
  <div class="tab-box">
    <div class="tab-item">
      <el-tag
        class="el-tag"
        :key="item.url"
        v-for="item in tag"
        :closable="tag.length > 1"
        :disable-transitions="false"
        :color="item.url == selecthash&&!isWhiteTheme ? '#4D516A' : item.url == selecthash&&isWhiteTheme ? '#F5F1FF' : ''"
        :style="{ color: item.url == selecthash&&!isWhiteTheme ? '#C7D1FF' : item.url == selecthash&&isWhiteTheme ? '#7367F0' : '' }"
        @close="handleClose(item)"
        @click="handleclick(item)"
      >
        {{ item.name }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "Tabs",
  components: {},
  computed: {
    ...mapState({
      tag: (state) => state.menu.tabList,
      result: (state) => state.menu.result,
      isWhiteTheme: (state) => state.config.isWhiteTheme,//主题颜色
    }),
  },
  data() {
    return {
      selecthash: "",
      inputVisible: false,
      inputValue: "",
      tabsLenght: "", //监听的当前tabLIst长度
    };
  },
  methods: {
    ...mapMutations({
      close: "closeTabs",
    }),
    // 关闭tag标签
    handleClose(tag) {
      this.close(tag);
      // 判断删除的标签是否是当前选择标签
      if (tag.url == this.selecthash) {
        /* 始终返回第tabList的一个标签 */
        this.$router.push({ path: this.tag[0].url + "" });
      }
    },
    handleclick(tag) {
      if (tag.url == this.selecthash) return;
      this.$router.push({ path: tag.url + "" });
    },
  },
  watch: {
    $route(to) {
      this.selecthash = to.path;
    },
  },
  created() {
    /* 打开页面即获取当前组件的路径 */
    // let hash = window.location.hash.split("#", 2)[1];
    let hash = window.location.pathname;
    this.selecthash = hash;
  },
};
</script>
<style lang="less"  scoped>
.tab-item ::-webkit-scrollbar {
  display: none;
}
.tab-box {
  position: relative;
  // padding-left: 8px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow: hidden;

  .tab-item {
    overflow-x: auto;
    padding-bottom: 3px;
    .el-tag {
      margin-right: 8px;
      cursor: pointer;
      border-radius: 6px;
      border: none;
      height: 36px;
      line-height: 36px;
      background: @primaryBgcolortab;
      color: @primaryTxtcolortab;
      ::v-deep .el-tag__close {
          color: @primaryTxtcolortab;
          &:hover{
            background-color: #7367F0;
            color: #fff;
          }
      }
    }
  }
}

/* 定义滚动条样式 */
::v-deep .tab-item::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 6px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .tab-item::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色 
}

/*定义滑块 内阴影+圆角*/
::v-deep .tab-item::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义滑块阴影
  background-color: @primaryBgcolor12; //定义滑块颜色
}
</style>